<style lang="less" scoped>
.common-layout {
  width: 100%;
  height: 100%;
  .video-collect {
    width: 100%;
    height: 100%;
    .page-select {
      margin-top: 15px;
      float: right;
    }
    .video {
      display: block;
      position: relative;
      width: 250px;
      height: 250px;
      .video-cover {
        display: block;
        position: relative;
        width: 100%;
        height: 55%;
        border-radius: 10px;
        .cover {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
        .img-mask {
          position: absolute;
          background: rgba(101, 101, 101, 0.6);
          color: #ffffff;
          opacity: 0;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          pointer-events:none;
          .img-mask-video-detail {
            position: absolute;
            font-size: 14px;
            left: 10%;
            top: 30%;
          }
        }
      }
      .video-cover:hover .img-mask {
        opacity: 1;
      }
      .video-info {
        width: 250px;
        height: 100%;
        margin-top: 10px;
        .title-font-size {
          font-size: 14px;
        }
        .info-font-size {
          font-size: 14px;
        }
        .video-date {
          width: 100%;
          height: 20px;
          .video-date-text {
            padding: 0 0;
            color: #999999;
          }
          .dropdown-link {
            margin-top: 2px;
            margin-left: 30px;
          }
        }
      }
      .video-mask {
        position: absolute;
        color: #ffffff;
        opacity: 0;
        top: 0;
        right: 0;
        width: 285px;
        height: 280px;
        border-radius: 10px;
        pointer-events:none;
        transition: all 0.3s ease-in-out;
        /* 动画延迟为0，持续时间为2秒 */
        animation: enter 0.5s forwards ;
        animation-play-state: paused;
      }
    }
    .video:hover .video-mask {
      opacity: 1;
      cursor: pointer;
      animation-play-state: running;
    }
  }
}
</style>

<template>
  <div class="common-layout">
    <el-container>
      <el-main style="height: 75vh">
        <div class="video-collect"  >
          <el-space wrap>
            <div class="video" v-for="(item,index) in videoItems" :key="index">
              <div class="video-cover">
                <img :src=item.cover alt="" class="cover"/>
                <div class="img-mask">
                  <div class="img-mask-video-detail">
                    <div>播放量：{{ item.playCount }}</div>
                    <div>收藏量：{{ item.collectCount }}</div>
                    <div>投稿人：{{ item.publisherName }}</div>
                  </div>
                </div>
              </div>

              <div class="video-info">
                <el-text line-clamp="2" class="title-font-size">{{item.title}}</el-text>
                <div class="video-date">
                  <el-text class="info-font-size video-date-text" style="margin-top: 10px">收藏于：{{item.createTime}}</el-text>
                  <el-dropdown>
                    <span class="dropdown-link" f>
                      <el-icon class="el-icon--right">
                        <MoreFilled />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>取消收藏</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              <div class="video-mask"></div>
            </div>
          </el-space>
          <div v-if="tabPosition === '热门视频'" class="page-select">
            <el-pagination background v-model:page-size="pageSize" v-model:current-page="pageNum" layout="prev, pager, next" :total="allHotVideo.length" @current-change="handlePageChange"/>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
  import {ref} from "vue";
  import {StarFilled, VideoPlay} from "@element-plus/icons-vue";
  import {getMyCollectVideo} from "../../../api/user/user.js";

  /*--------------变量------------------*/
  let videoItems = ref();

  /*--------------常规方法------------------*/

  /*--------------请求方法------------------*/
  // 获取用户收藏的全部视频
  function getUserCollectVideo() {
    getMyCollectVideo().then(response=> {
      console.log(response)
      videoItems.value = response.data;
      console.log(response.data)
    }).catch(error=> {
      console.log(error)
    })
  }
  // 进入页面后直接调用
  getUserCollectVideo()
  /*--------------钩子函数------------------*/

</script>